<script>
import QuestionCard from "../../components/Questionnare/QuestionCard/QuestionCard.vue";

export default {
  components: { QuestionCard },
  props: {},
  data() {
    return {
      explainItem: {
        id: 0,
        content:
          "接下来我们将进行一个简单筛查，来为您进行更好的个性化服务。在开始前，我们将简单介绍操作方法。\n上方的进度条展示了当前的答题进度。\n点击下方放大镜按钮可以将文字放大查看。\n点击下方喇叭按钮可以自动播放文字信息。",
        type: "plain",
        header: "explain",
      },
    };
  },

  async mounted() {
    // 提前获取用户位置
    const userLocation = await this.$requests.getUserLocation({
      showLoading: true,
    });
    this.$storage.set("user_location", userLocation);
    const userInfo = await this.$requests.getUserInfo({
      showLoading: true,
    });
  },

  methods: {
    start_screening() {
      uni.navigateTo({
        url: "../survey/survey?ques=screening",
      });
    },
  },
};
</script>

<template>
  <view class="flex-col group">
    <view class="fixed-header">
      <progress
        :percent="1"
        activeColor="#F26A77"
        backgroundColor="#FFFFFF"
        border-radius="8"
    /></view>

    <question-card :question="explainItem"> </question-card>

    <!-- <view class="flex-col mt-10">
      <view class="flex-col self-stretch group_1">
        <view class="flex-row items-center">
          <image class="image_7" src="/static/icon/notice_pink.svg" />
          <text class="font text_3 ml-5">说明：</text>
        </view>
        <text class="font mt-6">
          接下来我们将进行一个简单筛查，来为您进行更好的个性化服务。
          <br />
        </text>
      </view>
      <text class="self-start font mt-20"
        >在开始前，我们将简单介绍操作方法。</text
      >
      <text class="self-start font mt-20"
        >上方的进度条展示了当前的答题进度。</text
      >
      <text class="self-start font mt-20"
        >点击下方放大镜按钮可以将文字放大查看。</text
      >
      <text class="self-start font mt-20"
        >点击下方喇叭按钮可以自动播放文字信息。</text
      >
      <view class="flex-col self-stretch mt-20">
        <text class="font">点击下方麦克风按钮，可以进行语音识别答题。</text>
        <view class="flex-row items-center group_2 mt-4">
          <view class="flex-col justify-start items-center image-wrapper_2">
            <image class="image_7" src="/static/icon/zoom-in-filled.svg" />
          </view>
          <view
            class="flex-col justify-start items-center image-wrapper_2 ml-10"
          >
            <image class="image_7" src="/static/icon/sound-solid.svg" />
          </view>
          <view
            class="flex-col justify-start items-center image-wrapper_2 ml-10"
          >
            <image class="image_8" src="/static/icon/microphone.svg" />
          </view>
        </view>
      </view>
    </view> -->

    <button
      class="next-button self-center"
      hover-class="next-button-hover self-center"
      @click="start_screening"
    >
      开始筛查
    </button>
  </view>
</template>


<style>
page {
  background-color: #f5f5f5;
}
</style>

<style scoped lang="css">
.ml-5 {
  margin-left: 10rpx;
}

.font {
  font-size: 30rpx;
  line-height: 36rpx;
  color: #000000;
}

.group {
  margin-top: 32rpx;
  padding: 0 35rpx;
}

.section_6 {
  /* margin-top: 30rpx; */
  padding: 16rpx 24rpx;
  background-color: #ffffff;
  border-radius: 24rpx;
}

.group_1 {
  margin-right: 2.36rpx;
}

.image_7 {
  width: 48rpx;
  height: 48rpx;
}

.text_3 {
  font-weight: 700;
  line-height: 29.44rpx;
}

.group_2 {
  padding-top: 14rpx;
  border-top: solid 2rpx #f5f5f5;
}

.image-wrapper_2 {
  width: 48rpx;
}

.image_8 {
  width: 34rpx;
  height: 44rpx;
}

.next-button {
  width: 680rpx;
  margin-top: 30rpx;
  border-radius: 24rpx;
  background-color: #f26a77;
  color: #ffffff;
}

.next-button-hover {
  width: 342px;
  margin-top: 30rpx;
  border-radius: 24rpx;
  background-color: #ffc5cb;
  color: #ffffff;
}
.fixed-header {
  position: fixed; /* 固定定位 */
  top: 0; /* 距离顶部 0 */
  left: 0; /* 距离左侧 0 */
  width: 100%; /* 宽度占满屏幕 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 可选：添加阴影 */
}
</style>